<!--
  门卫主界面
  创建时间：2025-09-11
  作者：开发团队
  目的：门卫操作主界面，集成核验和记录查看功能
-->

<template>
  <CommonLayout>
    <template #sidebar>
      <GuardSidebar :active-menu="activeTab" @menu-select="setActiveTab" />
    </template>
    
    <div class="guard-dashboard">
      <component :is="currentComponent" />
    </div>
  </CommonLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import CommonLayout from '@/components/common/CommonLayout.vue'
import GuardSidebar from '@/components/guard/GuardSidebar.vue'
import QrCodeScanner from '@/components/guard/QrCodeScanner.vue'
import TodayRecords from '@/components/guard/TodayRecords.vue'

// 当前激活的标签页
const activeTab = ref('scanner')

// 组件映射
const componentMap = {
  scanner: QrCodeScanner,
  records: TodayRecords
}

// 当前显示的组件
const currentComponent = computed(() => {
  return componentMap[activeTab.value as keyof typeof componentMap] || QrCodeScanner
})

/**
 * 设置激活的标签页
 * :param tab: 标签页标识
 */
const setActiveTab = (tab: string): void => {
  activeTab.value = tab
}
</script>

<style scoped>
.guard-dashboard {
  height: 100%;
}
</style>"